<template>
  <div class="page-user-profile">
    <div class="container">
      <van-nav-bar
        left-arrow
        @click-left="$router.back()"
        title="编辑资料"
        right-text="保存"
        @click-right="save"
      />
      <!-- 用户资料 -->
      <van-cell-group>
        <van-cell is-link title="头像" @click="showPhoto = true" center>
          <van-image
            slot="default"
            width="1.5rem"
            height="1.5rem"
            fit="cover"
            round
            :src="photo"
          />
        </van-cell>
        <van-cell
          is-link
          title="名称"
          @click="showName = true"
          :value="user.name"
        />
        <van-cell
          is-link
          title="性别"
          @click="showGender = true"
          :value="user.gender === 0 ? '男' : '女'"
        />
        <van-cell
          is-link
          title="生日"
          @click="openDate()"
          :value="user.birthday"
        />
      </van-cell-group>
      <!-- 资料修改 -->
      <van-popup v-model="showPhoto" position="bottom">
        <input
          type="file"
          @change="preview"
          ref="selPhoto"
          style="display: none"
        />
        <van-cell
          @click="$refs.selPhoto.click()"
          value="本地相册选择"
          is-link
        />
        <van-cell value="拍照" is-link />
      </van-popup>
      <van-popup v-model="showName" position="bottom">
        <van-field v-model="user.name" required placeholder="请输入用户名" />
      </van-popup>
      <van-popup v-model="showGender" position="bottom">
        <van-cell value="男" @click="changeGender(0)" is-link />
        <van-cell value="女" @click="changeGender(1)" is-link />
      </van-popup>
      <van-popup v-model="showBirthday" position="bottom">
        <van-datetime-picker
          title="选择生日"
          v-model="nowDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @cancel="showBirthday = false"
          @confirm="confirmDate"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import dayjs from 'dayjs'
import { getUserProfile, updateUserPhoto, updateUserInfo } from '../../api/user'
// import { mapMutations } from 'vuex'
export default {
  name: 'user-profile',
  data () {
    return {
      // 弹窗控制
      showPhoto: false,
      showName: false,
      showGender: false,
      showBirthday: false,
      // 当前选中日期
      nowDate: new Date(),
      // 最小可选日期
      minDate: new Date('1950-01-01'),
      // 日期控件 最大可选日期
      maxDate: new Date(),
      // 默认用户信息
      photo: 'https://img.yzcdn.cn/vant/cat.jpeg',
      user: {
        name: '默认信息',
        gender: 0,
        birthday: '2019-10-10'
      }
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    ...mapMutations('chat', ['setPhoto']),
    // 获取待编辑的信息（登录人）
    async getUser () {
      const { data } = await getUserProfile()
      console.log('获得信息', data)
      this.user = data
      this.photo = data.photo
    },

    async save () {
      // 避免还没有打开弹出层修改=》报错
      console.log('选择的头像：', this.$refs.selPhoto, this.$refs.selPhoto.files[0])
      try {
        if (this.$refs.selPhoto && this.$refs.selPhoto.files[0]) {
          const { data } = await updateUserPhoto(this.$refs.selPhoto.files[0])
          console.log('上传成功后头像', data)
          this.setPhoto(data.photo)
        }
        // 文本信息修改
        await updateUserInfo(this.user)
        this.$toast.success('保存成功')
      } catch (error) {
        console.dir(error)
        this.$toast.fail('保存失败！')
      }
      // this.$toast.success('保存成功')
    },
    // 图片预览
    preview (e) {
      //  e.target事件源
      // console.log('选择的图片：', e.target.files[0], this.$refs.selPhoto.files[0])
      // 1. 创建文件读取实例
      const fileReader = new FileReader()
      // 2. 读取file对象数据=》传入读取的file对象=》异步
      fileReader.readAsDataURL(e.target.files[0])
      // 3. 通过onload回调获取读取结果=》base64格式
      fileReader.onload = () => {
        // console.log('读取结果：', fileReader)
        // console.log('读取结果：', fileReader.result)
        this.photo = fileReader.result
        this.showPhoto = false
      }
    },
    // methods
    // 打开日期选择
    openDate () {
      // 有生日数据
      if (this.user.birthday) {
        this.nowDate = new Date(this.user.birthday)
      }
      this.showBirthday = true
    },
    // 确认选择日期
    confirmDate (value) {
      // 确认时间后  把Date转换成String
      this.user.birthday = dayjs(value).format('YYYY-MM-DD')
      this.showBirthday = false
    },
    changeGender (gender) {
      // 选择性别 gender 0 男  1 女
      this.user.gender = gender
      this.showGender = false
    }
  }
}
</script>

<style scoped lang='less'></style>
